{% extends 'IcsocUIBundle::page.html.twig' %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@gritter_css'
    'bundles/icsocui/plugin/select2/select2.css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

{% block content %}
    <div class="content">
        <p class="alert" style="width:100%;height:40%;background-color:#F8F8F8 ">
            <input type="radio" name="evaluateCheck" value="3" class="lbl" {% if evaType == 1 %}checked{% endif %}/>
            <label style="margin-bottom:10px;font-size: larger">
                <span for="evaluate1" class="lbl" style="">满意度评价一</span>
            </label><br/>
        <span style="margin-left:20px;margin-top:10px;">
            <span class="lbl">
                语音选项：按键1=满意 按键2=不满意
            </span>
        </span>
        </p>
        <p class="alert" style="width:100%;background-color:#F8F8F8 ">
            <input type="radio" name="evaluateCheck" value="2" class="lbl" {% if evaType == 2 %}checked {% endif %} />
            <label style="margin-bottom:10px;font-size: larger">
                <span for="evaluate1" class="lbl" style="">满意度评价二</span>
            </label><br/>
            <span style="margin-left:20px;margin-top:10px;">
                <span class="lbl">
                    语音选项：按键1=满意 按键2=一般 按键3=不满意
                </span>
            </span>
        </p>
        <p class="alert" style="width:100%;background-color:#F8F8F8 ">
            <input type="radio" name="evaluateCheck" value="4" class="lbl" {% if evaType == 3 %}checked {% endif %} />
            <label style="margin-bottom:10px;font-size: larger">
                <span for="evaluate1" class="lbl" style="">满意度评价三</span>
            </label><br/>
            <span style="margin-left:20px;margin-top:10px;">
                <span class="lbl">
                    语音选项：按键1=非常满意 按键2=满意 按键3=一般 按键4=不满意
                </span>
         </span>
        </p>
        <div class="alert" style="width:100%;background-color:#F8F8F8">
            <input type="radio" name="evaluateCheck" value="1" class="lbl customEvaluate" {% if evaType == 4 %}checked {% endif %} />
            <label style="margin-bottom:10px;font-size: larger">
                <span for="evaluate1" class="lbl" style="">自定义满意度设置</span>
            </label><br/>
         <span class="custom-select alert" data-condition="0" style="margin-bottom:10px;padding:13px;display:block;width:100%;height:30%;background-color:#F8F8F8" id="span_1">
                <label style="margin-bottom:20px;">
                    <span class="lbl" style="font-size:14px;">请选择语音</span>
                </label>
                <span style="margin-left:20px;margin-top:10px;">
                    <select class="sound" name="evaluate_sound" id="eva_sound_1" onchange="playSound(this, 'sound_1')">
                        <option value="-1">点击选择语音</option>
                        {% for key, sound in sounds %}
                            <option value="{{ sound.id }}">
                                {{ sound.name }}
                            </option>
                        {% endfor %}
                    </select>
                    <audio class="evaluate_player align-middle" style="color: grey;width:29%;margin-left:20px;"  controls="controls" id="sound_1">
                        {{ 'Your browser does not support the player'|trans }}
                    </audio>
                </span><br/>
                <label style="margin-bottom:20px;">
                    <span for="evaluate1" class="lbl" style="font-size:14px;">请选择按键</span>
                </label>
                 <span style="margin-left:20px;margin-top:10px;">
                    <select name="evaluateKey" class="chosen-selects" id="chosen-selects-1" multiple="true" style="width:51%;height: 30px;">
                        {% for i in 1..9 %}
                            <option value="{{ i }}" >按键 {{ i }}</option>
                        {% endfor %}
                    </select>
                 </span>
                <span class="chosen-select-names" style="width:40%" id="span_div_1"></span>
            </span>

            <button class="pure-button pure-button-primary" id="addNodeBtn" type="button" onclick="addNodes()">
                <i class="fa fa-plus" >再添加一个满意度问题</i>
            </button>
        </div>

        <button class="btn btn-info" id="saveConfig" type="button" onclick="saveConfig()">
            <i class="ace-icon fa fa-check bigger-110"></i>
            {{ 'Save'|trans }}
        </button>
    </div>
    <div class="hidden" id="template">
        <div class="evaluateName" id="span_KEYID">
            <label style="margin-left:40px;margin-top:8px;">
                <span class="lbl chosenSelectName">keyname&nbsp;&nbsp;评价语</span>&nbsp;&nbsp;
            </label>
        <span class="lbl" style="margin-top:10px;">
            <input type="text" id="name-KEYID" value="evaname">
        </span>
            <label class="lbl" style="margin-left:30px;margin-top:8px;display: NONE" >
                <input id="sec_KEYID" type="checkbox" name="secondEvaluate" style="height: 12px;width: 12px;" onclick="secondEvaluate('KEYID')">
                <span style="font-size:14px;" >使用二级满意度</span>
            </label>
        </div>
    </div>
    <div class="hidden" id="template2">
        <div  id="span_KEYID" class="secondEvaluate alert" data-condition="0" style="margin:0 0 5px 60px;padding:13px;display:block;height:30%;background-color:#F8F8F8">
            <div id="span_div_KEYID">
                <label style="margin-bottom:20px;">
                    <span class="lbl" style="font-size:14px;">请选择语音</span>
                </label>
            <span style="margin-left:20px;margin-top:10px;">
                <select class="sound" id="eva_sound_KEYID" name="evaluate_sound" onchange="playSound(this, 'sound_KEYID')">
                    <option value="-1">点击选择语音</option>
                    {% for key, sound in sounds %}
                        <option value="{{ sound.id }}">
                            {{ sound.name }}
                        </option>
                    {% endfor %}
                </select>
                <audio class="evaluate_player align-middle" style="color: grey;width:29%;margin-left:20px;"  controls="controls" id="sound_KEYID">
                    {{ 'Your browser does not support the player'|trans }}
                </audio>
            </span><br/>
                <label style="margin:0 0 20px 10px;">
                    <span for="evaluate1" class="lbl" style="font-size:14px;">请选择按键</span>
                </label>
            <span style="margin-left:10px;margin-top:10px;">
                <select name="evaluateKey" id="chosen-selects-KEYID" kid="PID" multiple="true" style="width:51%;height: 30px;">
                    {% for i in 1..9 %}
                        <option value="{{ i }}" >按键 {{ i }}</option>
                    {% endfor %}
                </select>
             </span>
            </div>
        </div>
    </div>
    <div class="hidden" id="template3">
        <input class="btn delteEvaluate" style="margin-top:10px;margin-bottom:10px;border:1px;background-color:dodgerblue;" type="button" onclick="delNode(NUM)" value="删除满意度设置">
    </div>
{% endblock %}
{% block footer %}
    {% javascripts
    '@gritter_js'
    'bundles/icsocui/plugin/select2/select2.min.js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="text/javascript">
        var num = 1;
        var vccId = {{ vccId }};
        var sounds = {};
        var evaConfig = {{ evaConfig|raw }};
        var evaType = {{ evaType }};
        {% for key, sound in sounds %}
        sounds[{{sound.id}}] = '{{ sound.sounds_address}}';
        {% endfor %}
        $(document).ready(function () {
            $('.custom-select').hide();
            $('#addNodeBtn').hide();
            var isCheck = $('input:radio[name="evaluateCheck"]:checked').val();
            if (isCheck == 1) {
                $('.custom-select').show();
                $('#addNodeBtn').show();
            }

            $('input:radio[name="evaluateCheck"]').click(function() {
                var evaluate = $('input:radio[name="evaluateCheck"]:checked').val();
                if (evaluate == 1) {
                    $('.custom-select').show();
                    $('#addNodeBtn').show();
                    $('.secondEvaluate').show();
                    $(".chosen-selects").select2({
                        formatNoMatches:function(){return""}
                    });
                    $('.chosen-selects').on('change',function (ev) {
                        if (typeof(ev.added) != 'undefined') {
                            var text = ev.added.text;
                            var id = ev.added.id;
                            var str = $('#template').html();
                            var kid = 'kid-1-'+id;
                            str = str.replace(/keyname/g, text);
                            str = str.replace(/evaname/g, text);
                            str = str.replace(/KEYID/g, kid);
                            str = str.replace('NONE', '');
                            str = str.replace("hidden", '');
                            $('#span_div_1').append(str);
                        } else if (typeof(ev.removed) != 'undefined') {
                            var id = ev.removed.id;
                            var kid = 'kid-1-'+id;
                            $('#span_'+kid).remove();
                        }
                    });
                } else {
                    $('.custom-select').hide();
                    $('#addNodeBtn').hide();
                    $('.secondEvaluate').hide();
                }
            });

            if (evaType  == 4) {
                for (key in evaConfig) {
                    var obj = evaConfig[key];
                    var evaSoundId = 'eva_sound_'+key;
                    var evaSoundAddress = 'sound_'+key;
                    var selectId = 'chosen-selects-'+key;
                    var spanId = 'span_div_'+key;
                    var kid = 'kid-'+key;
                    if (key != 1) {
                        addNodes();
                        $("#chosen-selects-"+num).val(obj.valid_keys);
                        $("#chosen-selects-"+num).select2({
                            formatNoMatches:function(){return""}
                        });
                    }
                    $('#'+evaSoundId).val(obj.sound_id);
                    $('#'+evaSoundAddress).attr('src', '{{ path('icsoc_sound_play') }}?sound_id='+obj.sound_id);
                    $('#'+selectId).val(obj.valid_keys);
                    for (ck in obj.keys) {
                        var keyObj  = obj.keys[ck];
                        var str = $('#template').html();
                        var strid = kid+'-'+ck;
                        var secid = 'sec_'+strid; //是否二级的id;
                        str = str.replace(/keyname/g, '按键 '+ck);
                        str = str.replace(/evaname/g, keyObj.name);
                        str = str.replace(/KEYID/g, strid);
                        str = str.replace('NONE', '');
                        str = str.replace("hidden", '');
                        $('#'+spanId).append(str);
                        if (keyObj.hasOwnProperty('child') && !$.isEmptyObject(keyObj.child)) {
                            $('#'+secid).attr("checked", true);
                            secondEvaluate(strid);
                            $('#eva_sound_'+strid+'-2').val(keyObj.child.sound_id);
                            $('#sound_'+strid+'-2').attr('src', '{{ path('icsoc_sound_play') }}?sound_id='+keyObj.child.sound_id);
                            $('#chosen-selects-'+strid+'-2').val(keyObj.child.valid_keys);
                            $("#chosen-selects-"+strid+"-2").select2({
                                formatNoMatches:function(){return""}
                            });
                            for (cck in keyObj.child.keys) {
                                var ccKeyObj  = keyObj.child.keys[cck];
                                var str = $('#template').html();
                                var ccstrid = strid+'-2-'+cck;
                                str = str.replace(/keyname/g, '按键 '+cck);
                                str = str.replace(/evaname/g, ccKeyObj.name);
                                str = str.replace(/KEYID/g, ccstrid);
                                str = str.replace('NONE', 'none');
                                str = str.replace("hidden", '');
                                $('#span_div_'+strid+'-2').append(str);
                            }
                        }
                    }
                }
                $(".chosen-selects").select2({
                    formatNoMatches:function(){return""}
                });
                $('.chosen-selects').on('change',function (ev) {
                    if (typeof(ev.added) != 'undefined') {
                        var text = ev.added.text;
                        var id = ev.added.id;
                        var str = $('#template').html();
                        var kid = 'kid-1-'+id;
                        str = str.replace(/keyname/g, text);
                        str = str.replace(/evaname/g, text);
                        str = str.replace(/KEYID/g, kid);
                        str = str.replace('NONE', '');
                        str = str.replace("hidden", '');
                        $('#span_div_1').append(str);
                    } else if (typeof(ev.removed) != 'undefined') {
                        var id = ev.removed.id;
                        var kid = 'kid-1-'+id;
                        $('#span_'+kid).remove();
                    }
                });
            }

        });
        function playSound(id, sound_id)
        {
            var id = $(id).val();
            $('#'+sound_id).attr('src', '{{ path('icsoc_sound_play') }}?sound_id='+id);
        }
        function secondEvaluate (kid) {
            if(document.getElementById('sec_'+kid).checked){
                var str = $('#template2').html();
                str = str.replace(/KEYID/g, kid+'-2');
                str = str.replace(/PID/g, kid);
                str = str.replace('width:51%', 'width:60%');
                str = str.replace('WHNUM', '90');
                $('#span_'+kid).append(str);
                $("#chosen-selects-"+kid+"-2").select2({
                    formatNoMatches:function(){return""}
                });
                $("#chosen-selects-"+kid+"-2").on('change', function (ev) {
                    var kid = $(this).attr('kid');
                    if (typeof(ev.added) != 'undefined') {
                        var id = ev.added.id;
                        var skid = kid+'-2-'+id;
                        var text = ev.added.text;
                        var str = $('#template').html();
                        str = str.replace(/keyname/g, text);
                        str = str.replace(/evaname/g, text);
                        str = str.replace(/KEYID/g, skid);
                        str = str.replace('NONE', 'none');
                        str = str.replace("hidden", '');
                        $('#span_'+kid+'-2').append(str);
                    } else if (typeof(ev.removed) != 'undefined') {
                        var id = ev.removed.id;
                        var skid = kid+'-2-'+id;
                        $('#span_'+skid).remove();
                    }
                });
            } else {
                var skid = kid+'-2';
                $('#span_'+skid).remove();
            }
        }
        function addNodes() {
            num++;
            var str = $('#template2').html();
            str = str.replace('NONE', '');
            str = str.replace("hidden", '');
            str = str.replace(/60px/, '0px');
            str = str.replace('WHNUM', '100');
            str = str.replace(/KEYID/g, num);
            str = str.replace(/PID/g, num);
            var btn = $('#template3').html();
            btn = btn.replace('NUM', num);
            $('#addNodeBtn').before(str);
            $('#span_'+num).append(btn);
            $("#chosen-selects-"+num).select2({
                formatNoMatches:function(){return""}
            });
            $("#chosen-selects-"+num).on('change', function (ev) {
                var kid = $(this).attr('kid');
                if (typeof(ev.added) != 'undefined') {
                    var text = ev.added.text;
                    var id = ev.added.id;
                    var str = $('#template').html();
                    var ckid = 'kid-'+kid+'-'+id;
                    str = str.replace(/keyname/g, text);
                    str = str.replace(/evaname/g, text);
                    str = str.replace(/KEYID/g, ckid);
                    str = str.replace('NONE', '');
                    str = str.replace("hidden", '');
                    $('#span_div_'+kid).append(str);
                } else if (typeof(ev.removed) != 'undefined') {
                    var id = ev.removed.id;
                    var kid = 'kid-'+kid+'-'+id;
                    $('#span_'+kid).remove();
                }
            });
        }

        function delNode(num){
            $('#span_'+num).remove();
        }

        function saveConfig () {
            var res = new Object();
            var data = new Object();
            var evaluateCheck = $('input:radio[name="evaluateCheck"]:checked').val();
            switch (parseInt(evaluateCheck)) {
                case 1: //自定义
                    var number = 1;
                    for (var i = 1; i<=num; i++) {
                        //判断是否存在该节点；
                        if ($('#span_'+i).html()) {
                            var obj = new Object();
                            obj.sound_id = $('#eva_sound_'+i).val();
                            obj.valid_keys = $('#chosen-selects-'+i).select2('val');
                            obj.play_times = 3;
                            obj.sound_address = sounds[obj.sound_id];
                            obj.id = 'evaluate-'+vccId+'-'+number;
                            obj.keys = {};
                            if (!obj.sound_id || obj.sound_id == -1) {
                                $.gritter.add({
                                    title: '{{ 'Prompt'|trans }}',
                                    text: '请选择语音',
                                    class_name: 'gritter-error'
                                });
                                return ;
                            }
                            if (obj.valid_keys.length < 1) {
                                $.gritter.add({
                                    title: '{{ 'Prompt'|trans }}',
                                    text: '请选择按键',
                                    class_name: 'gritter-error'
                                });
                                return ;
                            }
                            //
                            for (var j = 0 ;j<obj.valid_keys.length; j++) {
                                var key = obj.valid_keys[j];
                                var keyObj = new Object();
                                keyObj.name = $.trim($('#name-kid-'+i+'-'+key).val());
                                keyObj.play_times = 3;
                                if (keyObj.name == '') {
                                    $.gritter.add({
                                        title: '{{ 'Prompt'|trans }}',
                                        text: '请填写评价语',
                                        class_name: 'gritter-error'
                                    });
                                    return ;
                                }
                                keyObj.id = 'evaluate-'+vccId+'-'+number+'-'+key;
                                var firstVersion = 0;

                                if (evaConfig != false && typeof(evaConfig[number]) != 'undefined' && typeof(evaConfig[number].keys) != 'undefined' && typeof(evaConfig[number].keys[key]) != 'undefined' && typeof(evaConfig[number].keys[key].name) != 'undefined'
                                        && evaConfig[number].keys[key].name != keyObj.name) {
                                    if (typeof(evaConfig[number].keys[key].version) != 'undefined') {
                                        firstVersion = parseInt(evaConfig[number].keys[key].version) + 1;
                                    } else {
                                        firstVersion = 1;
                                    }
                                } else if (evaConfig != false && typeof(evaConfig[number]) != 'undefined' && typeof(evaConfig[number].keys) != 'undefined' && typeof(evaConfig[number].keys[key]) != 'undefined' && typeof(evaConfig[number].keys[key].version) != 'undefined') {
                                    firstVersion = parseInt(evaConfig[number].keys[key].version);
                                }
                                keyObj.version = firstVersion;
                                var cid = 'evaluate-'+vccId+'-'+number+'-'+key; //如果一
                                keyObj.id = cid+'-'+firstVersion;
                                //查看是否选了二级
                                var kid = 'kid-'+i+'-'+key;
                                keyObj.child = {};
                                if (document.getElementById('sec_'+kid).checked) {
                                    keyObj.child.sound_id = $('#eva_sound_'+kid+'-2').val();
                                    keyObj.child.sound_address = sounds[keyObj.child.sound_id];
                                    keyObj.child.valid_keys = $('#chosen-selects-'+kid+'-2').select2('val');
                                    keyObj.child.play_times = 3;
                                    keyObj.child.id = keyObj.id;
                                    keyObj.child.keys = {};
                                    if (!keyObj.child.sound_id ||keyObj.child.sound_id == -1) {
                                        $.gritter.add({
                                            title: '{{ 'Prompt'|trans }}',
                                            text: '请选择语音',
                                            class_name: 'gritter-error'
                                        });
                                        return ;
                                    }
                                    if (keyObj.child.valid_keys < 1) {
                                        $.gritter.add({
                                            title: '{{ 'Prompt'|trans }}',
                                            text: '请选择按键',
                                            class_name: 'gritter-error'
                                        });
                                        return ;
                                    }
                                    for (var c = 0; c < keyObj.child.valid_keys.length; c++) {
                                        var ckey = keyObj.child.valid_keys[c];
                                        var cobj = new Object();
                                        cobj.name = $('#name-'+kid+'-2-'+ckey).val();
                                        if (cobj.name == '') {
                                            $.gritter.add({
                                                title: '{{ 'Prompt'|trans }}',
                                                text: '请填写评价语',
                                                class_name: 'gritter-error'
                                            });
                                            return ;
                                        }
                                        var secVersion = 0;
                                        if (evaConfig != false && typeof(evaConfig[number]) != 'undefined' && typeof(evaConfig[number].keys) != 'undefined'&& typeof(evaConfig[number].keys[key]) != 'undefined'
                                                && typeof(evaConfig[number].keys[key].child) != 'undefined'  && typeof(evaConfig[number].keys[key].child.keys) != 'undefined' && typeof(evaConfig[number].keys[key].child.keys[ckey]) != 'undefined'
                                                && typeof(evaConfig[number].keys[key].child.keys[ckey].name) != 'undefined' &&
                                                evaConfig[number].keys[key].child.keys[ckey].name != cobj.name) {
                                            if (typeof(evaConfig[number].keys[key].child.keys[ckey].version) != 'undefined') {
                                                secVersion = parseInt(evaConfig[number].keys[key].child.keys[ckey].version) + 1;
                                            } else {
                                                secVersion = 1;
                                            }
                                        } else if (evaConfig != false && typeof(evaConfig[number]) != 'undefined' && typeof(evaConfig[number].keys[key]) != 'undefined' && typeof(evaConfig[number].keys[key].child) != 'undefined'  && typeof(evaConfig[number].keys[key].child.keys) != 'undefined'
                                                && typeof(evaConfig[number].keys[key].child.keys[ckey]) != 'undefined' && typeof(evaConfig[number].keys[key].child.keys[ckey].version) != 'undefined') {
                                            secVersion = parseInt(evaConfig[number].keys[key].child.keys[ckey].version);
                                        }
                                        cobj.play_times = 3;
                                        cobj.id = cid+'-'+ckey+'-'+secVersion;
                                        cobj.version = secVersion;
                                        keyObj.child.keys[ckey] = cobj;
                                    }
                                }
                                obj.keys[key] = keyObj;
                            }
                            res[number] = obj;
                            number++;
                        }
                    }
                    break;
                case 2://默认二
                    data.evaluate_type = 2;
                    data.sound_id = 1;
                    data.sound_address = '/var/sounds/evaluate_default2.wav';
                    data.play_times = 3;
                    data.valid_keys = [1,2,3];
                    data.id = 'evaluate-'+vccId+'-1';
                    data.keys = {
                        "1": {"name": '满意 ', "play_times": 3, "id": 'evaluate-' + vccId + '-1' + '-1'},
                        "2": {"name": '一般', "play_times": 3, "id": 'evaluate-' + vccId + '-1' + '-2'},
                        "3": {"name": '不满意', "play_times": 3, "id": 'evaluate-' + vccId + '-1' + '-3'}
                    };
                    res[1] = data;
                    break;
                case 3://默认一
                    data.evaluate_type = 1;
                    data.sound_id = 1;
                    data.sound_address = '/var/sounds/evaluate_default1.wav';
                    data.play_times = 3;
                    data.valid_keys = [1,2];
                    data.id = 'evaluate-'+vccId+'-1';
                    data.keys = {
                        "1": {"name": '满意', "play_times": 3, "id": 'evaluate-' + vccId + '-1' + '-1'},
                        "2": {"name": '不满意', "play_times": 3, "id": 'evaluate-' + vccId + '-1' + '-2'}
                    };
                    res[1] = data;
                    break;
                case 4://默认三
                    data.evaluate_type = 3;
                    data.sound_id = 1;
                    data.sound_address = '/var/sounds/evaluate_default3.wav';
                    data.play_times = 3;
                    data.valid_keys = [1,2,3,4];
                    data.id = 'evaluate-'+vccId+'-1';
                    data.keys = {
                        "1":{"name":'非常满意 ',"play_times":3,"id":'evaluate-'+vccId+'-1'+'-1'},
                        "2":{"name":'满意',"play_times":3,"id":'evaluate-'+vccId+'-1'+'-2'},
                        "3":{"name":'一般',"play_times":3,"id":'evaluate-'+vccId+'-1'+'-3'},
                        "4":{"name":'不满意',"play_times":3,"id":'evaluate-'+vccId+'-1'+'-4'},
                    };
                    res[1] = data;
                    break;
            }

            $.ajax({
                type:'post',
                url: '{{ path('icsoc_evaluate_setconfig') }}',
                data: {evaluateConfig: JSON.stringify(res)},
                success:function (res) {
                    if (res.err) {
                        $.gritter.add({
                            title: '{{ 'Prompt'|trans }}',
                            text: res.msg,
                            class_name: 'gritter-error'
                        });
                    } else {
                        $.gritter.add({
                            title: '{{ 'Prompt'|trans }}',
                            text: '{{ 'Add success'|trans }}',
                            class_name: 'gritter-success'
                        });
                    }
                }
            });
        }
    </script>
{% endblock %}